<template>
    <div class='mine-box'>
        <van-nav-bar title="个人中心" class="top" />
        <div class="personal">
            <van-image round width="1.4rem" height="1.4rem" fit="contain" :src="avatar_default" />
            <dl>
                <dt>姓名:{{username}}</dt>
                <dd>{{bindCommunity}}</dd>
            </dl>
            <!-- <van-icon name="arrow" /> -->
        </div>
        <ul>
            <li @click="toUserInfo">
                <van-cell-group>
                    <van-field label="个人信息" right-icon="arrow" left-icon="manager" disabled />
                </van-cell-group>
            </li>
            <li @click="tofeedback">
                <van-cell-group>
                    <van-field label="反馈建议" right-icon="arrow" left-icon="eye" disabled />
                </van-cell-group>
            </li>
            <li @click="">
                <van-cell-group>
                    <van-field label="使用帮助" right-icon="arrow" left-icon="smile" disabled />
                </van-cell-group>
            </li>
            <!-- <li @click="toUpdate">
                    <van-cell-group>
                        <van-field label="检测更新" right-icon="arrow" left-icon="underway" disabled class="banben1" />
                    </van-cell-group>
                </li> -->
            <li @click="toRecommendDownload">
                <van-cell-group>
                    <van-field label="推荐下载" right-icon="arrow" left-icon="thumb-circle" disabled />
                </van-cell-group>
            </li>
            <li @click="toSetting">
                <van-cell-group>
                    <van-field label="设置" right-icon="arrow" left-icon="setting" disabled />
                </van-cell-group>
            </li>
            <!-- <li @click="goOut()">
                    <van-cell-group>
                    
                        <van-button type="warning" class="goOut">退出登录</van-button>
                    </van-cell-group>
                </li> -->
        </ul>
    </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    // document.addEventListener('plusready', function () {
    //     var webview = plus.webview.currentWebview();
    //     plus.key.addEventListener('backbutton', function () {
    //         webview.canBack(function (e) {
    //             if (e.canBack) {
    //                 webview.back();
    //             } else {
    //                 webview.close(); //hide,quit
    //                 //plus.runtime.quit();
    //             }
    //         })
    //     });
    // });
    document.addEventListener("plusready", function() { 
        // 注册返回按键事件 
        plus.key.addEventListener('backbutton', function() { 
            // 事件处理 
            window.history.back();
        }, false); 
    });
    import { mapMutations, mapState } from 'vuex'
    import { Toast } from "vant"
    export default {
        name: 'Mine',
        //import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
            //这里存放数据
            return {
                username: '昵称',
                bindCommunity: '已认证',
                avatar_default: require('../assets/img/avatar_male_man.png'),
                idcard_state: null,
                comm_state: ""
                // banben: plus.runtime.version,
            };
        },
        //监听属性 类似于data概念
        computed: {
            ...mapState(["homeId", "userid"])
        },
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            ...mapMutations(['changeToken', "changehomeId"]),
            toPersonalInfo() {
                this.$router.push('/personalInfo');
            },
            toUserInfo() {
                if (this.idcard_state == 1) {
                    Toast("请先绑定小区")
                    this.$router.push(
                        {
                            name: 'IDcard'
                        },
                    )
                } else if (this.comm_state == 2 || this.comm_state == 3 && this.idcard_state == 2) {
                    this.$router.push('/userInfo');
                }else{
                    this.$router.push(
                        {
                            name: 'IDcard'
                        },
                    )
                }

            },
            tofeedback() {
                this.$router.push('/feedback');
            },
            toUpdate() {
                this.$router.push({
                    name: "update",
                    // params: {
                    //     banben: this.banben
                    // }
                })

            },
            toRecommendDownload() {
                this.$router.push('/RecommendDownload')
            },
            goOut() {
                localStorage.setItem('token', "")
                this.changeToken("")
                this.changehomeId("")
                console.log(this.homeId)
                this.$router.push('/start1');
            },
            toSetting() {
                this.$router.push('/setting');
            },
            getCommunityList1() {
                let that = this
                this.$axios.get('/comm/getuserReviewStatus', {
                    params: {
                        user_id: this.userid
                    }
                }).then((res) => {
                    //console.log(res);
                    let { message, data, status } = res;
                    console.log(res)
                    if (status == 200) {
                        if (data.idcard_state == 1) {
                            this.bindCommunity = "未认证"
                            this.idcard_state = 1
                            this.comm_state = data.comm_state
                        } else {
                            this.bindCommunity = "已认证"
                            this.username = data.cardname
                            this.idcard_state = data.idcard_state
                            this.comm_state = data.comm_state
                        }
                    }
                })
            },

        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
            console.log(this.userid, "userid")
            this.getCommunityList1()
        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            console.log("userid", this.userid)
        },
        beforeCreate() { }, //生命周期 - 创建之前
        beforeMount() { }, //生命周期 - 挂载之前
        beforeUpdate() { }, //生命周期 - 更新之前
        updated() { }, //生命周期 - 更新之后
        beforeDestroy() { }, //生命周期 - 销毁之前
        destroyed() { }, //生命周期 - 销毁完成
        activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang='scss' scoped>
    //@import url(); 引入公共css类
    .mine-box {
        .personal {
            height: 1.6rem;
            position: relative;
            padding-left: 2rem;

            .van-image {
                position: absolute;
                left: 0.3rem;
                top: 50%;
                margin-top: -0.7rem;
                border: 1px solid #bbb;
            }

            dl {
                padding: 0.2rem 0;

                dt {
                    padding: 0.2rem 0;
                }
            }

            .van-icon {
                position: absolute;
                right: 0.3rem;
                font-size: 0.32rem;
                top: 50%;
                margin-top: -0.16rem;
                color: #969799;
            }
        }

        ul {
            li {
                margin: 0.3rem 0;
            }
        }
    }

    .goOut {
        width: 100%;
    }

    .banben1 {
        position: relative;
    }

    .banben {
        position: absolute;
        right: .7rem;
        bottom: .1rem;
        color: #969799;
    }
</style>